<template>
  <div id="mpxsqk">
    <el-radio-group v-model="checkList">
      <el-radio :label="1">表</el-radio>
      <el-radio :label="0">图</el-radio>
    </el-radio-group>
    <div>&nbsp;</div>
    <div v-if="show2018 && checkList" style="float: left;width: 40%;">
      <h2>2018数据</h2>
      <el-table
        :data="res2018"
        border
        max-height="500"
        show-summary
        :default-sort="{ prop: 'ybrs__sum', order: 'descending' }"
      >
        <el-table-column label="景区" prop="ygjd"></el-table-column>
        <el-table-column
          label="人数"
          prop="ybrs__sum"
          sortable
          :sort-method="sortByYbrs"
        ></el-table-column>
        <el-table-column
          label="购票金额(万元)"
          prop="gpje__sum"
          sortable
          :sort-method="sortByGpje"
        ></el-table-column>
      </el-table>
    </div>
    <div v-if="show2019 && checkList" style="float: left;width: 40%;margin-left: 50px;">
      <h2>2019数据</h2>
      <el-table
        :data="res2019"
        border
        max-height="500"
        show-summary
        :default-sort="{ prop: 'ybrs__sum', order: 'descending' }"
      >
        <el-table-column label="景区" prop="ygjd"></el-table-column>
        <el-table-column
          label="人数"
          prop="ybrs__sum"
          sortable
          :sort-method="sortByYbrs"
        ></el-table-column>
        <el-table-column
          label="购票金额(万元)"
          prop="gpje__sum"
          sortable
          :sort-method="sortByGpje"
        ></el-table-column>
      </el-table>
    </div>
    <div v-if="!checkList">
      <Zhutu text="test" :y-axis="yAxis" :series="series"></Zhutu>
    </div>
  </div>
</template>

<script>
  import Zhutu from './zhutu'
export default {
  name: "mpxsqk",
  data() {
    return {
      resData: "",
      dparray: [],
      res: [],
      res2018: [],
      res2019: [],
      show2018: false,
      show2019: false,
      showZt: false,
      checkList: 1,
    };
  },
  components: {
    Zhutu,
  },
  props: ["midData"],
  methods: {
    sortByYbrs(a, b) {
      return a.ybrs__sum - b.ybrs__sum;
    },
    sortByGpje(a, b) {
      return a.gpje__sum - b.gpje__sum;
    }
  },
  mounted() {
    if (this.midData.result2018) {
      this.show2018 = true;
      this.midData.result2018.sort((a, b) => {
        return b.ybrs__sum - a.ybrs__sum;
      });
      this.midData.result2018.forEach((item, index) => {
        if (index < 10) this.res2018.push(item);
        else if (index === 10) {
          this.res2018[10] = {};
          this.res2018[10]["ygjd"] = "其他";
          this.res2018[10]["gpje__sum"] = item.gpje__sum;
          this.res2018[10]["ybrs__sum"] = item.ybrs__sum;
        } else {
          this.res2018[10]["gpje__sum"] += item.gpje__sum;
          this.res2018[10]["ybrs__sum"] += item.ybrs__sum;
        }
      });
      this.res2018.forEach(item => {
        item.gpje__sum = (item.gpje__sum / 10000).toFixed(2);
      });
    }
    if (this.midData.result2019) {
      this.show2019 = true;
      this.midData.result2019.sort((a, b) => b.ybrs__sum - a.ybrs__sum);
      this.midData.result2019.forEach((item, index) => {
        if (index < 10) this.res2019.push(item);
        else if (index === 10) {
          this.res2019[10] = {};
          this.res2019[10]["ygjd"] = "其他";
          this.res2019[10]["gpje__sum"] = item.gpje__sum;
          this.res2019[10]["ybrs__sum"] = item.ybrs__sum;
        } else {
          this.res2019[10]["gpje__sum"] += item.gpje__sum;
          this.res2019[10]["ybrs__sum"] += item.ybrs__sum;
        }
      });
      this.res2019.forEach(item => {
        item.gpje__sum = (item.gpje__sum / 10000).toFixed(2);
      });
    }
  },
  computed: {
    yAxis() {
      let a = this.res2018.map(i => i.ygjd);
      let b = this.res2019.map(i => i.ygjd);
      let r = new Set([...a, ...b]);
      let t = [];
      r.forEach(i => {
        t.push(i);
      });
      return t;
    },
    series() {
      let a = [];
      let b = [];
      this.yAxis.forEach(item=>{
        let t = this.res2018.find(e => e.ygjd === item);
        if (t === undefined) {
          a.push(0)
        } else {
          a.push(t.ybrs__sum)
        }

        let y = this.res2019.find(e => e.ygjd === item);
        if (y === undefined) {
          b.push(0)
        } else {
          b.push(y.ybrs__sum)
        }
      });
      return [a,b]
    }
  },

};
</script>

<style scoped>
  #mpxsqk {
    overflow: hidden;
  }

</style>
